import React, { Component } from 'react'
import { NavBar, Carousel, Flex } from 'antd-mobile';
import SearchInput from "../searchInput/searchInput"
// 引入样式
import "./index.scss"
import axios from "axios"
import { withRouter } from "react-router-dom"
/* 引入axios请求拦截 */
import myaxios from "../../utils/myaxios"
class index extends Component {
  state = {
    swiper_list: [],
    imgHeight: 170,
    catitems: [],//首页分类的数据
    productDta: [],//图片列表的数据
    showSwiper: false
  }
  componentDidMount() {
    /* 首页润博的数据 */
    myaxios.get("home/swiperdata").then(res => {
      // console.log(res);
      this.setState({
        swiper_list: res
      })
    }).catch((err) => console.log(err))
    /* 首页当红的数据 */
    myaxios.get("home/catitems").then(res => {
      // console.log(res);
      this.setState({
        catitems: res
      })
    }).catch((err) => console.log(err))
    /* 首页图片列表 */
    myaxios.get("home/floordata").then(res => {
      // console.log(res);
      this.setState({
        productDta: res,
        showSwiper: true
      })
    }).catch((err) => console.log(err))
  }

  // 点击图片跳转
  handleSwiperClick = (goods_id) => {
    this.props.history.push("/goodDetail/" + goods_id)
  }
  //点击图片内容
  handleItemsClick = (params) => {
    this.props.history.push("/category")
  }
  //图片列表的点击
  handleImgClick = (props) => {
    console.log(this.props);
    this.props.history.push("/goodList?" + "query=服装")
  }

  render() {
    return (
      <div className="yg-index">
        {/* 首页导航开始 */}
        <div className="yg-index-nav">
          <NavBar className="index-nav">优购体育</NavBar>
        </div>
        {/* 首页导航结束 */}
        {/* 搜索框开始 */}
        <div className="yg-index-searchFor">
          <SearchInput></SearchInput>
        </div>
        {/* 搜索框结束 */}
        {/* 首页轮播图的开始 */}
        <div className="yg-index-con">
          <div className="yg-index-swiper">
            {this.state.showSwiper && (<Carousel
              autoplay={true}
              infinite
            >
              {this.state.swiper_list.map(val => (
                <div
                  onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                  key={val.goods_id}
                  style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                >
                  <img
                    src={val.image_src}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'));
                      this.setState({ imgHeight: 'auto' });
                    }}
                  />
                </div>
              ))}
            </Carousel>
            )}
          </div>
          {/* 首页轮播图的结束 */}
          {/* 首页内容图片的开始*/}
          <div className="yg-index-content">
            <div className="index-content-item">
              <Flex>
                {
                  this.state.catitems.map(v => {
                    return <Flex.Item key={v.image_src} onClick={this.handleItemsClick}>
                      <img src={v.image_src} alt="" />
                    </Flex.Item>
                  })
                }
              </Flex>
            </div>
          </div>
          {/* 首页内容图片的结束*/}
          {/* 首页图片列表的开始*/}
          <div className="yg-index-productDta">
            {
              this.state.productDta.map(v => {
                // console.log(v);
                return <div key={v.floor_title.image_src} className="productData-item">
                  {/* 标题开始 */}
                  <div className="product-title">
                    <img src={v.floor_title.image_src} alt="" />
                  </div>
                  {/* 标题结束 */}
                  {/* 图片列表的开始 */}
                  <div className="product-image-list">
                    {
                      v.product_list.map(vv => {
                        // console.log(vv);
                        return <div className="image-list-item" key={vv.image_src} onClick={this.handleImgClick}>
                          <img src={vv.image_src} alt="" />
                        </div>
                      })
                    }
                  </div>
                  {/* 图片列表结束 */}

                </div>
              })
            }
          </div>
          {/* 首页图片列表的结束*/}
        </div>
      </div>
    )
  }
}
export default withRouter(index)
